<template>
	<a-modal :footer="null" :visible="visible" :title="title" @ok="handleOk" @cancel="handleCancel" width="50%">
		<a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"
			@finishFailed="onFinishFailed" @finish="onFinish">

			<a-form-item label="标题" name="title">
				<a-input v-model:value="formState.title" placeholder="请输入商品名称" />
			</a-form-item>
			<a-form-item label="作者" name="author">
				<a-input v-model:value="formState.author" placeholder="请输入作者" />
			</a-form-item>
			
			<a-form-item label="资讯内容" name="content">
				 	<div style="width:30vw">
								<EDWORD @courserHtml="courserHtml" ref="edword"/>
					</div>
			</a-form-item>
	 
			<a-form-item label="封面图片" name="cover">
				<UPLOAD ref="uploadbox" :desc="'图片上传'" :num="1" @sendStatus="backimgurl" v-model:value="formState.cover" />
			</a-form-item>
	 
			<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
				<a-button type="primary" html-type="submit">确定</a-button>
				<a-button style="margin-left: 10px" @click="handleCancel">取消</a-button>
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script>
import {
	defineComponent,
	reactive,
	ref,
	onMounted,
	nextTick,
	computed,
	getCurrentInstance
} from 'vue'
import moment from 'moment'
import { useStore, mapGetters } from 'vuex'
import { UPLOAD,EDWORD } from '/@/components'
import { addAlbumByGet, addGoodsByGet, updateGoods_get } from '/@/api'
export default defineComponent({
	props: {
		model: {
			type: Object,
			default: function () {
				return {}
			}
		},
		title: {
			type: String,
			default: ''
		},
		visible: {
			type: Boolean,
			default: function () {
				return false
			}
		},
		cid: null
	},
	emits: {
		'close-modal': null,
		ok: null
	},
	components: {
		UPLOAD,
		EDWORD
	},
	setup(props, context) {
		const formRef = ref()
		const uploadbox = ref(null)
		const edword = ref(null)
		const formState = reactive({
			sale_type: '1',
			is_recd: false,
			goods_type: "1",
			datetime: [],
			limit_buy: "0"
		})
		const cate = ref([])
		const ablumlist = ref([])
		let validateImg = async (_rule, value) => {
			if (value == '') {
				return Promise.reject('请上传图片')
			} else {
				return Promise.resolve()
			}
		}
		const rules = {
			url: [{
				required: true,
				message: '请输入商品链接',
				trigger: 'blur'
			}],
			title: [
				{
					required: true,
					message: '请输入标题',
					trigger: 'blur'
				}
				// {
				// 	min: 3,
				// 	max: 5,
				// 	message: 'Length should be 3 to 5',
				// 	trigger: 'blur'
				// }
			],
			datetime: [
				{
					type: 'array',
					required: true,
					message: '请选择时间',
					trigger: 'change'
				}
			],
			cover: [
				{
					required: true,
					message: '请上传图片',
					trigger: 'blur'
				}
			],

			author: [
				{
					required: false,
					message: '请输入作者'
				}
			],

			goods_cate_id: [
				{
					required: true,
					message: '请选择分类',
					trigger: 'blur'
				}
			],
			goods_album_id: [
				{
					required: false,
					message: '请选择专辑',
					trigger: 'blur'
				}
			],
			name: [
				{
					required: true,
					message: '请输入商品名称',
					trigger: 'blur'
				}
			],
			goods_stock: [
				{
					required: true,
					message: '请输入数量',
					trigger: 'blur'
				}
			],
			tokenID: [{
				required: true,
				message: "请输入商品ID",
				trigger: 'blur'
			}],
			content: [
				{
					required: false,
					message: '请输入价格',
					trigger: 'blur'
				}
			],
			intro: [
				{
					required: true,
					message: '请输入商品详情',
					trigger: 'blur'
				}
			],
			weight: [
				{
					required: true,
					message: '请选择商品克重',
					trigger: 'blur'
				}
			],
			place: [{
				required: true,
				message: '请输入产地',
				trigger: 'blur'
			}],

			pro_name: [{
				required: true,
				message: '请输入商品品名',
				trigger: 'blur'
			}],
			material: [{
				required: true,
				message: '请输入商品材质',
				trigger: 'blur'
			}],
			liner_type: [{
				required: true,
				message: '请输入内胆类型',
				trigger: 'blur'
			}],
			ex_categories: [{
				required: true,
				message: '请输入体验类型',
				trigger: 'blur'
			}]
		}

		const onFinish = (values) => {
			context.emit('ok', {
				model: props.model,
				values
			})
		}

		const onFinishFailed = (errorInfo) => {
			console.log('Failed:', errorInfo)
			// console.log(uploadbox.value.list)
		}
		const handleCancel = () => {
			context.emit('close-modal', false)
		}
		const resetForm = () => {
			formRef.value.resetFields()
		}
		const backimgurl = (n) => {
			console.log(n)
			formState.cover = n.toString()
		}
		const changecate = (id) => {
			addGoodsByGet(id).then((res) => {
				const {
					result: { list }
				} = res
				ablumlist.value = list
			})
		}
		const stopInput = (e) => {
			var value = e.target._value;
			console.log(value)
		}
		onMounted(() => {
			const {
				edit,
				cover,
			 	id,
					author,
					content,
					title
			} = props.model
			if (edit) {
		  
		    
				formState.title = title
				formState.cover=cover
				formState.content = content
				formState.author = author
      
				nextTick(() => {
					uploadbox.value.fileList.push({
						status: 'done',
						url: `${cover}`,
					})
					uploadbox.value.list.push(`${cover}`)
					 edword.value.upDate(content);
				})

			}
		})
	const courserHtml = (n) => {
			console.log(n)
			if(n.html=="<p><br></p>"){
				 formState.content=""
			}else{
				 formState.content=n.html
			}
		}
		// 	edword.value.upDate(detail);
		return {
			formRef,
			labelCol: {
				span: 5
			},
			wrapperCol: {
				span: 15
			},
			other: '',
			formState,
			rules,
			handleCancel,
			resetForm,
			backimgurl,
			uploadbox,
			onFinish,
			onFinishFailed,
			cate,
			changecate,
			ablumlist,
			stopInput,
			edword,
			courserHtml
		}
	}
})
</script>